<template>
  <div>
    <el-divider content-position="left"><span style="font-size: 1.15rem;">个人成绩录入</span><span style="margin-left: 2rem;margin-right:1rem;"></span>
      <template>
        <el-select v-model="value" clearable placeholder="选择班级" size="medium" @change="changbj" @clear="clear">
          <el-option
            v-for="item,idx in options"
            :key="idx"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </template>

      <span style="margin-left: 2rem;margin-right:1rem;"></span>
      <template v-if="options1">
        <el-select v-model="value1" clearable placeholder="选择学生" size="medium"  @change="changxs"   @clear="clear1" :disabled="!value">
          <el-option
            v-for="item,idx in options1"
            :key="idx"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button icon="el-icon-search" type="primary" circle style="margin-left: 1.725rem;" size="medium" plain :disabled="(!this.pageParams.bjId)||(!this.pageParams.xsId)" @click="btnClick"></el-button>
    </el-divider>
    <el-row v-if="button">
      <my-table  listPath="grade/page2" savePath="" deletePath="" :table="table" :pageParams="pageParams" :dialogForm="form" :rules="rules"   :pageSize="[5,10,20,35,50]" :btns="btns">
        <template v-slot:tableColumn >
           <el-table-column width="350px" >
              <template slot="header" slot-scope="scope">
                  <span>成绩</span>
              </template>
              <template slot-scope="scope">
				  <el-input-number v-model="scope.row.grade" controls-position="right" @change="setFixedTel(scope.row)" :min="0" :max="200"></el-input-number>
              </template>
          </el-table-column>
        </template>
      </my-table>
    </el-row>
  </div>
</template>

<script>
  import myTable from '../../components/myTable.vue';
  export default{
    components:{myTable},
    data() {
      return {
        options:[],
        options1:[],
        table:[
          {
            title:'课程',
            field:'course.name'
          },
        ],
        value:'',
        value1:'',
        bj:{
          bjId:''
        },
        pageParams:{
          bjId:'',
          xsId:''
        },
        row:{}
        ,
        button:false,
        form:{},
        rules:{},
        btns:false
      }
    },
    methods:{
      changbj(val){
		this.value1='';
		this.pageParams.xsId='';
        this.button=false;
        this.bj.bjId=val;
        this.pageParams.bjId=val;
        this.$ajax.post("grade/xsClassCjTable",this.bj).then(res=>{
          var result = res.data;
            if(result.success){
              this.options1=result.data;
            }
          })
      },
      changxs(val){
        this.button=false
        this.pageParams.xsId=val;
      }
      ,
      clear(){
        this.value1='';
        this.button=false
        this.pageParams.bjId='';
      }
      ,
      clear1(){
        this.button=false
        this.pageParams.xsId='';
      }
      ,
      btnClick(){
        this.button=true
      },
      setFixedTel(row){
        this.row.id=row.id;
        this.row.grade=row.grade;
        this.$ajax.post("grade/classCjxg",this.row).then(res=>{
          var result = res.data;
          if(result.success){
             this.$notify.success({
                  title: '提示',
                  message: '成绩修改成功',
                  position: 'bottom-right'
              });
          }
      })
      }
    }
    ,
    created() {
		
		var role =window.sessionStorage.getItem("role")
			if(role==='ROLE_STUDENT'){
				this.$router.back();
		}
		
      this.$ajax.post("tbClass/list",{}).then(res=>{
        var result = res.data;
        if(result.success){
          this.options=result.data;
          }
        })
    }
  }
</script>

<style>
</style>
